<template>
    <div v-if="listData">
        <!-- search bar -->
        <div class="search-bar">
            <van-row>
                <van-col span="3"><img :src="locationIcon" alt="" class="location-icon"></van-col>
                <van-col span="16">
                    <input type="text" class="search-input">
                </van-col>
                <van-col span="5" class="search-button">
                    <van-button size="mini">查找</van-button>
                </van-col>
            </van-row>
        </div>
        <!-- 轮播图 -->
        <div class="swiper-area">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(banner,index) in listData.slides" :key="index">
                    <!-- <img v-lazy="banner.imageUrl" :alt="index"/> -->
                    <img v-lazy="banner.image" :alt="index" width="100%"/>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 小导航 -->
        <div class="type-bar">
            <!-- 按钮 -->
            <div class="type-bar-box">
                <div v-for="(item,index) in listData.category" :key="index">
                    <img v-lazy="item.image" alt="index">
                    <span>{{item.mallCategoryName}}</span>
                </div>
            </div>
            <img :src="listData.advertesPicture.PICTURE_ADDRESS" alt="index" width="100%">
        </div>
        <!-- Recommend goods area 商品推荐 -->
        <recommend :listData='listData'></recommend>
        <!-- 商品楼层 -->
        <div>
            <floor :floorName='floorName.floor1' :foolNumber="1" :floor='floor1'></floor>
            <floor :floorName='floorName.floor2' :foolNumber="2" :floor='floor2'></floor>
            <floor :floorName='floorName.floor3' :foolNumber="3" :floor='floor3'></floor>
        </div>
        <!-- 热卖商品 -->
        <div class="hotGoods">
            <h2>热卖商品</h2>
            <div class="hotGoods_body">
                <van-list v-model="loading" :finished="finished">
                    <goodsInfoComponent :hotGoods="hotGoods"></goodsInfoComponent>
                </van-list>
            </div>
        </div>
    </div>
</template>



<script>
import axios from 'axios'
import recommend from './block/recommend'
import floor from './block/floor'
import goodsInfoComponent from './block/goodsInfoComponent'

import url from '@/serviceAPI.confing.js'
export default {
    data(){
        return {
            locationIcon:require('../assets/images/location.png'),
            listData:'',
            floor1:'',//商品楼层1
            floor2:'',//商品楼层2
            floor3:'',//商品楼层3
            floorName:'',//商品楼层标题
            hotGoods:'',//热卖商品
            loading: false,
            finished: false
        }
    },
    components:{
        recommend,
        floor,
        goodsInfoComponent
    },
    created(){
        axios({
            url:url.ShoppingIndex,
            method:'GET'
        })
        .then(response => {
            console.log(response)
            this.listData = response.data.data
            this.floor1 = response.data.data.floor1
            this.floor2 = response.data.data.floor2
            this.floor3 = response.data.data.floor3
            this.floorName = response.data.data.floorName
            this.hotGoods = response.data.data.hotGoods
            console.log(this.listData)
        })
        .catch(error=>{
            console.log("数据连接失败")
        })
    },
}
</script>

<style>
.search-bar{
    height:2.4rem;
    background-color: #e5017d;
    line-height:2.4rem;
}
.search-bar .locationIcon-div{
    text-align: center
}
.search-bar .location-icon{
    width:70%;
    margin:0px auto;
    display: block;
    margin-top:0.3rem;
}
.search-input{
    width:100%;
    height: 1.3rem;
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-bottom: 1px solid 1px !important ;
    background-color: #e5017d;
    color:#fff;
}
.search-button{
    text-align: center;
}
.swiper-area{
    width:20rem;
    height:9.15625rem;
    overflow: hidden;
    clear:both;
}
/*按钮*/
.type-bar-box{
    display:flex;
    margin:0px 0.4rem;
    background: #ffffff;
    border-radius:4px;
    text-align: center;
    padding:.4rem 0px;
    margin-bottom:.2rem;
}
.type-bar-box div{
    flex:1;
}
.type-bar-box div img{
    width:88%;
    display: block;
    margin:0px auto;
}
.type-bar-box div span{
    word-break:keep-all;
    font-size:.7rem;
}

.hotGoods h2{
    text-align:center;
    font-size:.9rem;
    font-weight:100;
    line-height:2.5rem;
}
.hotGoods_body div{
    background: #FFF;
    padding:.5rem 0;
}
.hotGoods_body img{
    display:block;
    width:80%;
    margin:0px auto;
}
.hotGoods_body p{
    text-align: center;
    width:80%;
    margin:0px auto;
    font-size:0.7rem;
    padding:.2rem 0px;
}
</style>
